<template>
  <div class="flex flex-row box-border">
    <div class="flex-1 w-0 flex justify-end">
      <div class="flex flex-row">
        <template v-for="(leftMenu, idx) of leftMenuArr" :key="idx">
          <Demo01MenuItem :title="leftMenu.title" :children="leftMenu.children"></Demo01MenuItem>
        </template>
      </div>
    </div>
    <div
      class="flex-shrink-0 w-[531px] bg-menuCenterBg bg-no-repeat bg-[length:100%_100%] flex flex-row justify-center items-center mx-[16px]"
    >
      <div
        class="menu-title text-[length:48px] font-family-YouSheBiaoTiHei h-[59px] leading-[63px] font-normal"
      >
        {{ title }}
      </div>
    </div>
    <div class="flex-1 w-0">3</div>
  </div>
</template>

<script setup lang="ts">
import type { MenuItemInfo } from './typing'

defineProps<{
  title: string
  leftMenuArr?: MenuItemInfo[]
}>()
</script>

<style scoped></style>
